<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

    <!-- 自定义CSS -->
    <link rel="stylesheet" href="css/myapp.css">

    <title>我的生活</title>
</head>
<body>

<div class="page-group">
    <div class="page page-current">

        <!-- 标题栏 -->
        <header class="bar bar-nav">
            <a class="icon icon-me pull-right open-panel"></a>
            <h1 class="title">百合网活动专场</h1>
        </header>

        <!-- 内容区开始 -->
        <div class="content">

            <div class="content-block">

                <!-- Swiper Sliders -->
                <div class="swiper-container swiper-init" data-effect="slide"
                     data-direction="horizontal"
                     data-pagination=".swiper-pagination"
                     data-next-button=".swiper-button-next"
                     data-prev-button=".swiper-button-prev"
                     data-pagination-clickable="true">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="images/photos/photo3.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="images/photos/photo4.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="images/photos/photo5.jpg" alt=""></div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next "></div>
                    <div class="swiper-button-prev"></div>
                    <!-- If we need scrollbar -->

                    <div class="swiper-scrollbar"></div>

                </div>

                <p class="intro">我的左右两边有留白,我的左右两边有留白,我的左右两边有留白,我的左右两边有留白,我的左右两边有留白,我的左右两边有留白,我的左右两边有留白</p>
            </div>

            <div class="content-block">
                <p class="buttons-row">
                    <a href="#tab1" class="tab-link button active">正在报名中的活动</a>
                    <a href="#tab2" class="tab-link button">免费体验活动</a>
                </p>
                <div class="tabs-simple">
                    <div class="tabs">
                        <div id="tab1" class="tab active ">


                            <div class="card">
                                <a href="details.html" class="item-link item-content">
                                    <div valign="bottom" class="card-header color-white no-border no-padding">
                                        <img class='card-cover' src="images/photos/photo5.jpg" alt="">
                                    </div>
                                </a>
                                <div class="card-content">
                                    <div class="card-content-inner">
                                        <div class="row no-gutter">
                                            <div class="col-80"><h3>情人节特别高端活动</h3></div>
                                            <div class="col-20"><p class="color-danger">(限20名)</p></div>
                                        </div>
                                        <div class="row no-gutter">
                                            <div class="col-80"><p>深圳.福田 2016.07.01 13:00-16:00</p></div>
                                            <div class="col-20"><p class="color-primary">$100/人</p></div>
                                        </div>

                                    </div>
                                </div>

                                <!--
                                <div class="card-footer">
                                    <a href="#" class="button">我要报名</a>
                                    <a href="#" class="link">赞</a>
                                    <a href="#" class="link">活动详情</a>
                                </div>
                                -->
                            </div>


                            <div class="card">
                                <a href="details.html" class="item-link item-content">
                                <div valign="bottom" class="card-header color-white no-border no-padding">
                                    <img class='card-cover' src="images/photos/photo7.jpg" alt="">
                                </div>
                                </a>
                                <div class="card-content">
                                    <div class="card-content-inner">
                                        <div class="row no-gutter">
                                            <div class="col-80"><h3>华为腾讯联姻专场</h3></div>
                                            <div class="col-20"><p class="color-danger">(限20名)</p></div>
                                        </div>
                                        <div class="row no-gutter">
                                            <div class="col-80"><p>深圳.南山 2016.08.01 12:00-16:00</p></div>
                                            <div class="col-20"><p class="color-primary">$80/人</p></div>
                                        </div>

                                    </div>
                                </div>
                                <!--
                                <div class="card-footer">
                                    <a href="#" class="button">我要报名</a>
                                    <a href="#" class="link">赞</a>
                                    <a href="#" class="link">活动详情</a>
                                </div>
                                -->
                            </div>

                            <div class="card">
                                <a href="details.html" class="item-link item-content">
                                <div valign="bottom" class="card-header color-white no-border no-padding">
                                    <img class='card-cover' src="images/photos/photo6.jpg" alt="">
                                </div>
                                </a>
                                <div class="card-content">
                                    <div class="card-content-inner">
                                        <div class="row no-gutter">
                                            <div class="col-80"><h3>金融高端人士联姻Party</h3></div>
                                            <div class="col-20"><p class="color-danger">(限10名)</p></div>
                                        </div>
                                        <div class="row no-gutter">
                                            <div class="col-80"><p>深圳.福田 2016.07.15 12:00-14:00</p></div>
                                            <div class="col-20"><p class="color-primary">$120/人</p></div>
                                        </div>

                                    </div>
                                </div>
                                <!--
                                <div class="card-footer">
                                    <a href="#" class="button">我要报名</a>
                                    <a href="#" class="link">赞</a>
                                    <a href="#" class="link">活动详情</a>
                                </div>
                                -->
                            </div>


                        </div>

                        <div id="tab2" class="tab">
                            <div class="card">
                                <a href="details.html" class="item-link item-content">
                                <div valign="bottom" class="card-header color-white no-border no-padding">
                                    <img class='card-cover' src="images/photos/photo7.jpg" alt="">
                                </div>
                                </a>
                                <div class="card-content">
                                    <div class="card-content-inner">
                                        <div class="row no-gutter">
                                            <div class="col-80"><h3>情人节特别高端活动</h3></div>
                                            <div class="col-20"><p class="color-danger">(限20名)</p></div>
                                        </div>
                                        <div class="row no-gutter">
                                            <div class="col-80"><p>深圳.福田 2016.07.01 13:00-16:00</p></div>
                                            <div class="col-20"><p class="color-primary">$100/人</p></div>
                                        </div>

                                    </div>
                                </div>
                                <!--
                                <div class="card-footer">
                                    <a href="#" class="button">我要报名</a>
                                    <a href="#" class="link">赞</a>
                                    <a href="#" class="link">活动详情</a>
                                </div>
                                -->
                            </div>

                            <div class="card">
                                <a href="details.html" class="item-link item-content">
                                <div valign="bottom" class="card-header color-white no-border no-padding">
                                    <img class='card-cover' src="images/photos/photo6.jpg" alt="">
                                </div>
                                </a>
                                <div class="card-content">
                                    <div class="card-content-inner">
                                        <div class="row no-gutter">
                                            <div class="col-80"><h3>情人节特别高端活动</h3></div>
                                            <div class="col-20"><p class="color-danger">(限20名)</p></div>
                                        </div>
                                        <div class="row no-gutter">
                                            <div class="col-80"><p>深圳.福田 2016.07.01 13:00-16:00</p></div>
                                            <div class="col-20"><p class="color-primary">$100/人</p></div>
                                        </div>

                                    </div>
                                </div>
                                <!--
                                <div class="card-footer">
                                    <a href="#" class="button">我要报名</a>
                                    <a href="#" class="link">赞</a>
                                    <a href="#" class="link">活动详情</a>
                                </div>
                                -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--内容区结束 -->

    </div>
</div>

<div class="panel-overlay"></div>
<!-- Left Panel with Reveal effect -->
<div class="panel panel-right panel-reveal">
    <div class="content-block">
        <iframe src="me.html" id="iframe_content" name="iframe_content"
                scrolling="auto" align="center" onload="iFrameHeight()">

        </iframe>
        <!-- Click on link with "close-panel" class will close panel -->
        <!--<p><a href="#" class="close-panel">关闭</a></p>-->
    </div>
</div>

<script type="text/javascript" src="js/myapp.js" charset="utf-8"></script>
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>

</body>
</html>
